import React, { Component } from 'react'
import { browserHistory } from 'react-router';
import { TopHeader, SideAntd, Footer } from '../../components'
import Actions from '../../actions';
import Welcome from '../Welcome';
import cookie from 'react-cookie';
import { Tabs, Icon, Divider } from 'antd';
import { LocaleProvider } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';


const TabPane = Tabs.TabPane;
export default class Main extends Component {
    constructor(props) {
        super(props);

        this.tabIndex = '0';
        this.tabName = "欢迎";
        const panes = [
            { title: this.tabName, content: this.props.children, key: this.tabIndex },
        ];

        this.state = {
            right: "",
            shouqi: "",
            isHideLeft: false,
            styleTheme: cookie.load("styleTheme") ? cookie.load("styleTheme") : "",

            activeKey: panes[0].key,
            panes: panes,
            children: this.props.children
        };
    }
    logoOnClick = () => {
        browserHistory.push('/main');
    }
    changeStyle = () => {
        let d=new Date();
        d.setDate(d.getDate()+30);
        let styleTheme = this.state.styleTheme;
        if(styleTheme != "theme-white"){
            styleTheme = "theme-white";
            cookie.save('styleTheme', "theme-white", { path: '/', expires:d });
        }else{
            styleTheme = "";
            cookie.remove('styleTheme', { path: '/' });
        }
        this.setState({
            styleTheme: styleTheme
        })
    }
    //改变工厂，刷新左侧菜单传递中间函数
    refreshLeftMenu = () => {
        this.refs.Accordion.refreshLeftMenu();
    }
    menuLeft = () => {
        this.refs.Top.handClick();
        let shouqi = this.state.shouqi;
        let right = this.state.right;
        let isHideLeft= this.state.isHideLeft;

        if (shouqi != "main-left-hide") {
            shouqi = "main-left-hide";
            right = "main-right-moveLeft";
            isHideLeft = true;
        } else {
            shouqi = "";
            right = "";
            isHideLeft = false;
        }
        this.setState({
            shouqi: shouqi,
            right: right,
            isHideLeft: isHideLeft
        })
        //左侧列表是否隐藏，list列表需要用到，如果隐藏给列表宽度加宽
        Actions.hideLeft(isHideLeft);
    }
    componentWillReceiveProps(nextProps) {
        //this.setState({ children:  nextProps.children});

        const panes = this.state.panes;
        const activeKey = this.tabIndex;
        const panesItem = panes.filter( (item) => {
            return item.key === activeKey
        });
        if(panesItem.length === 0){
            panes.push({ title: this.tabName, content: nextProps.children, key: activeKey });
        }

        this.setState({ panes, activeKey });
    }
    onChange = (activeKey) => {
        this.setState({ activeKey });
    }
    onEdit = (targetKey, action) => {
        this[action](targetKey);
    }
    add = (menuItemKey, resourceName) => {
        this.tabIndex = menuItemKey.toString();
        this.tabName = resourceName;
    }
    remove = (targetKey) => {
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (lastIndex >= 0 && activeKey === targetKey) {
            activeKey = panes[lastIndex].key;
        }
        this.setState({ panes, activeKey });
    }

    removeAll = () => {
        this.setState({ panes: [{ title: "欢迎", content: <Welcome />, key: '0' },], activeKey: '0' });
    }
    render() {
        const operations = <Icon title="关闭所有tabs" onClick={this.removeAll} style={{ marginRight: '10px', fontSize: '20px', cursor: 'pointer'}} type="close" />;
        return(
            <LocaleProvider locale={zh_CN}>
            <div className={"box " + this.state.styleTheme}>
                {/*侧边导航  start*/}
                <div className={"main-left " + this.state.shouqi} ref="Menu">
                    <div className="logo" onClick={this.logoOnClick}>
                    嘉兴鹏海智能制造WMS系统软件
                    </div>
                    {/*<Accordion ref='Accordion' url="/base/resource/menu"/>*/}
                    <SideAntd currentSystem='cosmo_branch01' ref='Accordion' addTabs={this.add} url="/base/resource/menu"/>
                </div>{/*侧边导航  end*/}
                {/*右侧内容  start*/}
                <div className={"main-right " + this.state.right}>

                    <TopHeader ref="Top" refreshLeftMenu={this.refreshLeftMenu} changeStyle={this.changeStyle} hck={this.menuLeft}/>

                    <div className="contentPage">
                       
                        {this.props.children}

                        {/* {renderChildren(this.props, this.state.isHideLeft)}
                        <Tabs
                            hideAdd
                            onChange={this.onChange}
                            activeKey={this.state.activeKey}
                            type="editable-card"
                            onEdit={this.onEdit}
                            tabBarExtraContent={ operations }
                        >
                            {
                                this.state.panes.map( pane =>
                                    <TabPane tab={pane.title} key={pane.key}>
                                      {pane.content}
                                   </TabPane>
                                )
                            }
                      </Tabs> */}
                    </div>

                    <Footer />

                </div>{/*右侧内容  end*/}
            </div>
            </LocaleProvider>
        )
    }
}
//父组件用,props是指父组件的props
function renderChildren(props, isHideLeft) {
    //遍历所有子组件（按当前路由规则配置，应该只有一个子组件）
    return React.Children.map(props.children, child => {
        //console.log('child.type.displayName--------',child.type.displayName.substring(0,4));
        if (child.type.displayName.substring(0,4) === "List") {
            return React.cloneElement(child, {
                //1、把isHideLeft   赋值给 ListComponent 这个组件
                //2、ListComponent  传给   ListBox
                //3、ListBox        传给   FlexGrow
                //4、FlexGrow  判断左侧是否隐藏：
                //              a、isHideLeft=true 隐藏  给列表宽度加上左侧的宽度 240
                //              b、isHideLeft=false 不隐藏，不做处理
                isHideLeft: isHideLeft
            })
        }else{
            return child
        }
    })
}
